<template>
	<view class="">
		<view class="setting-page">
			<!-- Header -->
			<Header :avatar="loginInfo.avatar"></Header>
			<view class="setting-conent">
				<view class="setting-title">
					<image src="@/static/images/setting/setting-title-icon.png" mode="widthFix"
						class="setting-title-img" />
					<view class="setting-title-txt">
						设置
					</view>
				</view>
				<view class="setting-info">
					<view class="setting-area">
						<view class="setting-area-title">
							基本信息
						</view>
						<view class="setting-area-info">
							<view class="info-li">
								<view class="info-title">
									头像：
								</view>
								<view class="info-val" style="display: flex;align-items: center;cursor: pointer;">
									<view v-if="loginInfo.avatar" class="avatar-view" style="background:none;" @click="uploadImg">
										<image :src="loginInfo.avatar" mode="scaleToFill" class="avatar-img"/>
									</view>
									<view v-else class="avatar-view" @click="uploadImg">
										<text class="avatar-text">上传<br />头像</text>
									</view>
									<image src="@/static/images/setting/arrow-right.png" mode="widthFix" class="arrow-right-img" @click="uploadImg"/>
									<view class="upload-btn-comp upload-comp-btn" @click="uploadImg">
										<image src="@/static/images/projectDetail/upload-icon.png" class="upload-icon-img"></image>
										<view class="upload-comp-text">
											上传头像
										</view>
									</view>
								</view>
							</view>
							<view class="info-li">
								<view class="info-title">
									用户ID：
								</view>
								<view class="info-val">
									{{loginInfo.user_id}}
								</view>
							</view>
							<view class="info-li">
								<view class="info-title">
									姓名：
								</view>
								<view class="info-val">
									{{loginInfo.real_name}}
								</view>
							</view>
							<view class="info-li">
								<view class="info-title">
									手机号码：
								</view>
								<view class="info-val">
									{{loginInfo.phone}}
								</view>
							</view>
						</view>
					</view>
					<view class="setting-area setting-reset-pwd">
						<view class="setting-area-title">
							修改密码
						</view>
						<Tip :tipInfo="tipInfo"></Tip>
						<view class="setting-area-info">
							<view class="info-li">
								<view class="info-title">
									当前密码：
								</view>
								<view class="info-val">
									<input v-model="form.ole_pass_word" type="password" class="setting-input">
								</view>
							</view>
							<view class="info-li">
								<view class="info-title">
									新密码：
								</view>
								<view class="info-val">
									<input v-model="form.new_pass_word" type="password" class="setting-input">
									<view class="pwd-tip">
										新密码6-10位，由数字合字母组成
									</view>
								</view>
							</view>
							<view class="info-li">
								<view class="info-title">
									确认新密码：
								</view>
								<view class="info-val">
									<input v-model="form.confirm_pass_word" type="password" class="setting-input">
								</view>
							</view>
							<view class="info-li">
								<view class="info-title">
								</view>
								<view class="info-val">
									<button class="info-submit" @click="submit">保存</button>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="setting-info resetpwd-link" style="margin-top: 13px;">
					<view class="setting-area">
						<view class="setting-area-info">
							<view class="info-li" @click="goResetPwd">
								<view class="info-title">
									修改密码
								</view>
								<view class="info-val" style="display: flex;align-items: center;">
									<image src="@/static/images/setting/arrow-right.png" mode="widthFix" class="arrow-right-img"/>
								</view>
							</view>
						</view>	
					</view>
				</view>		
			</view>
		</view>
		<Footer class="page-footer-bottom"></Footer>
		<ToastComp v-if="toastInfo.visible" :toastInfo="toastInfo" @closeToast="closeToast" @canel="cancelFun" @cancel="confirmFun"></ToastComp>
	</view>
</template>

<script>
	import ToastComp from "@/components/ToastComp/ToastComp.vue"
	import Header from "@/components/Header/Header.vue"
	import Footer from "@/components/Footer/Footer.vue"
	import Tip from "@/components/Tip/Tip.vue"
	import UploadFile from "@/components/UploadFile/UploadFile.vue"
	import { updateAvatar, getUserInfo, changePassword } from "@/common/api/user.js"
	import { regPwd  } from "@/utils/reg.js"
	export default {
		data() {
			return {
				// toast
				toastInfo: {
					visible: false,
					type: 'success',
					title: '',
					subTitle: '',
					cancel: false,
					confirm: false,
					closeShow: false
				},
				tipInfo: {
					text: '1. 密码一日只能修改一次；2. 其他信息错误请联系运营人员修改。'
				},
				uploadInfo: {
					btnTxt: '上传头像'
				},
				form: {
					new_pass_word: '',
					ole_pass_word: '',
					confirm_pass_word: ''
				},
				loginInfo:{
					user_id: '',
					real_name: '',
					phone: '',
					avatar: ''
				} ,// 用户信息
				file: ''
			}
		},
		mounted() {
			// 获取用户信息
			uni.getStorage({
				key: 'LoginInfo',
				success: (res) => {
					this.loginInfo = JSON.parse(res.data)
				},
				fail:() => {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			});
		},
		onShow(){
			this.getUserInfoFun()
		},
		methods: {
			// 跳转修改密码
			goResetPwd() {
				uni.navigateTo({
					url: '/pages/setting/resetPassword'
				})
			},
			submit(){
				this.changePasswordFun()
			},
			changePasswordFun(){
				if (!this.form.ole_pass_word) {
					uni.showToast({
						title: '请输入当前密码',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.form.new_pass_word) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!regPwd.test(this.form.new_pass_word)) {
					uni.showToast({
						title: '新密码6-10位，由数字合字母组成',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.form.new_pass_word !== this.form.confirm_pass_word) {
					uni.showToast({
						title: '请输入新密码与确认密码需要保持一致！',
						icon: 'none',
						duration: 2000
					})
					return
				}
				
				let data = {
					new_pass_word: this.form.new_pass_word,
					ole_pass_word: this.form.ole_pass_word
				}
				changePassword(data).then(res => {
					if (res.code === 200) {
						this.toastInfo.title = '密码修改成功'
						this.toastInfo.subTitle = ''
						this.toastInfo.type = 'success'
						this.toastInfo.closeShow = false
						this.toastInfo.visible = true
						setTimeout(()=>{
							this.toastInfo.visible = false
						}, 1500)
						
						uni.removeStorageSync('Authorization');
						uni.removeStorageSync('LoginInfo');
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}, 1500)
					} else {
						this.toastInfo.title = res.message
						this.toastInfo.subTitle = ''
						this.toastInfo.type = 'error'
						this.toastInfo.closeShow = false
						this.toastInfo.visible = true
						setTimeout(()=>{
							this.toastInfo.visible = false
						}, 1500)
					}
				})
			},
			// 上传头像
			uploadImg(){
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: (res) => {
						console.log(res)
						const tempFilePaths = res.tempFilePaths;
						let file = res.tempFiles[0]
						const type = file.name.substr(file.name.lastIndexOf(".")).toLowerCase();
						// 上传类型限制
						const fileType = [".png", ".jpeg", ".jpg", ".gif"];
						if (!fileType.includes(type)) {
							let typeTxt = fileType.join(",");
							uni.showToast({
								title: `温馨提示：只支持${typeTxt}格式的文件`,
								icon: 'none',
								duration: 1500
							})
							return;
						}
						// const isLt2M = file.size / 1024 / 1024 <= 5;
						// if (!isLt2M) {
						// 	uni.showToast({
						// 		title: `文件最大不能超过5MB`,
						// 		icon: 'none',
						// 		duration: 1500
						// 	})
						// 	return;
						// }
						this.updateAvatarFun(tempFilePaths)
					}
				})
			},
			// 上传头像函数
			updateAvatarFun(tempFilePaths){
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				let Authorization = 'Bearer ' + uni.getStorageSync('Authorization')
				const header = {
					Authorization: Authorization,
					'Accept-Version': '1.0.0'
				}
				uni.uploadFile({
					url: '/api/app/user/update_avatar',
					filePath: tempFilePaths[0],
					name: 'file',
					header,
					success: (uploadFileRes) => {
						// 如果图片名称为image.jpg会有显示的问题，可能image会默认关键字
						console.log(uploadFileRes)
						uni.hideLoading()
						if(uploadFileRes.statusCode === 200){
							// uni.showToast({
							// 	title: '头像上传成功',
							// 	icon: 'none',
							// 	duration: 1500
							// })
							this.toastInfo.title = '头像上传成功'
							this.toastInfo.subTitle = ''
							this.toastInfo.type = 'success'
							this.toastInfo.closeShow = false
							this.toastInfo.visible = true
							setTimeout(() => {
								this.toastInfo.visible = false
							}, 1500)
							
							this.getUserInfoFun()
						} else {
							this.toastInfo.title = '头像上传失败'
							this.toastInfo.subTitle = ''
							this.toastInfo.type = 'error'
							this.toastInfo.closeShow = false
							this.toastInfo.visible = true
							setTimeout(() => {
								this.toastInfo.visible = false
							}, 1500)
						}
					}
				});
			},
			// 更新头像后重新获取用户信息
			getUserInfoFun(){
				getUserInfo().then(res => {
					if (res.code === 200) {
						let LoginInfo = res.data
						this.loginInfo.avatar = res.data.avatar
						uni.setStorageSync('LoginInfo', JSON.stringify(LoginInfo))
						this.$forceUpdate()
					}
					setTimeout(() => {
						this.$forceUpdate()
					}, 1000)
				})
			}
		},
		// tosat
		closeToast(){
			this.toastInfo.visible = false
		},
		// 取消
		cancelFun(){
			this.toastInfo.visible = false
		},
		// 确认
		confirmFun(){
			this.toastInfo.visible = false
		}
	}
</script>

<style lang="scss" scoped>
	
	.setting-page {
		background-color: #ffffff;
		padding-bottom: 80px;

		.setting-conent {
			margin: 40px auto;
			width: 976px;
			min-height: 850px;
			background: #FFFFFF;
			box-shadow: 0px 2px 8px 0px rgba(48, 51, 59, 0.1);
			// 上传头像
			.upload-comp-btn {
				&:active {
					opacity: .6;
				}
			
				width: 116px;
				height: 36px;
				background: #FFFFFF;
				border-radius: 2px;
				border: 1px solid #E7EAEF;
				font-size: 14px;
				font-family: PingFangSC-Regular,
				PingFang SC;
				font-weight: 400;
				color: #2D3036;
				display: flex;
				align-items: center;
				justify-content: center;
			
				.upload-icon-img {
					width: 16px;
					height: 16px;
					display: inline-block;
					margin-right: 4px;
				}
			}

			.setting-title {
				width: 100%;
				height: 104px;
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom: 1px solid #EEF1F5;

				.setting-title-img {
					width: 28px;
					height: 26px;
					display: inline-block;
					margin-right: 7px;
				}

				.setting-title-txt {
					font-size: 28px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #2D3036;
				}
			}
			.resetpwd-link{
				display: none;
			}
			.setting-info {
				padding: 0 40px;

				.setting-area {
					padding: 40px 0;
					border-bottom: 1px solid #EEF1F5;

					&:last-child {
						border: none;
					}

					.setting-area-title {
						font-size: 16px;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #2D3036;
						margin-bottom: 24px;
					}
					
					.setting-area-info {
						.info-li {
							display: flex;
							padding: 12px 0;
							align-items: center;

							.info-title {
								width: 100px;
								text-align: right;
								font-size: 14px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #2D3036;
								padding-right: 16px;
							}

							.info-val {
								font-size: 14px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #646A74;
								.info-submit{
									&:active{
										opacity: 0.8;
									}
									width: 108px;
									height: 36px;
									background: #26bbff;
									border-radius: 4px;
									color: #ffffff;
									font-size: 14px;
								}

								.avatar-view {
									width: 64px;
									height: 64px;
									border-radius: 50%;
									overflow: hidden;
									background: #ccc;
									margin-right: 24px;
									display: flex;
									justify-content: center;
									align-items: center;
									.avatar-text{
										font-size: 10px;
										color: #e8e8e8;
									}
								}
								.arrow-right-img{
									display: none;
								}

								.avatar-img {
									// width: 64px;
									height: 70px;
									// border-radius: 50%;
								}

								.setting-input {
									width: 240px;
									height: 36px;
									background: #FFFFFF;
									border-radius: 2px;
									border: 1px solid #E7EAEF;
									padding: 8px 12px;
									box-sizing: border-box;
								}

								.pwd-tip {
									height: 16px;
									font-size: 12px;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #979EAA;
									line-height: 16px;
									margin-top: 8px;
								}
							}
						}
					}
				}
			}
		}
	}
	@media screen and (min-width: 0px) and (max-width:1024px){
		page{
			background: #FAFBFC;
		}
		.setting-page{
			background: none;
			overflow-y: auto;
			.setting-conent{
				margin-top: 0;
				padding: 0;
				width: 100%;
				box-shadow: none;
				min-height: auto;
				background: transparent;
				.setting-title{
					height: 54px;
					padding: 0 20px;
					box-sizing: border-box;
					background: #ffffff;
					margin-bottom: 13px;
					.setting-title-img{
						display: none;
					}
					.setting-title-txt{
						font-size: 16px;
					}
					.setting-title-txt-app{
						display: inline-block;
						font-size: 16px;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #2D3036;
					}
				}
				.resetpwd-link{
					display: block;
				}
				.setting-info{
					padding: 0 20px;
					background-color: #ffffff;
					.setting-reset-pwd{
						display: none;
					}
					.setting-area {
						padding: 0;
						border: none;
						.setting-area-title{
							display: none;
						}
						.setting-area-info{
							.info-li{
								border-bottom: 1px solid #F2F2F2;
								&:last-child{
									border-color: transparent;
								}
								background-color: #ffffff;
								padding: 20px 0;
								display: flex;
								justify-content: space-between;
								.info-title{
									text-align: left;
								}
								.info-val{
									width: 60%;
									word-break: break-all;
									text-align: right;
									justify-content: flex-end;
									.avatar-view{
										width: 42px;
										height: 42px;
										margin-right: 10px;
										display: flex;
										justify-content: flex-end;
										.avatar-img{
											width: 42px;
											height: 42px;
										}
										.avatar-text{
											display: inline-block;
											width: 42px;
											height: 42px;
											display: flex;
											justify-content: center;
											align-items: center;
										}
									}
									.upload-btn-comp{
										display: none;
										cursor: pointer;
									}
									.arrow-right-img{
										display: block;
										width: 7px;
										height: 12px;
									}
								}
							}
						}
						
					}
					
				}
				
			}
		}
		.page-footer-bottom{
			display: none;
		}
	}
</style>
